<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML和CSS学习示例</title>
    <style>
      /* CSS样式部分 */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      
      body {
        font-family: 'Microsoft YaHei', Arial, sans-serif;
        line-height: 1.6;
        color: #333;
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
        background-color: #f5f5f5;
      }
      
      header {
        background-color: #4e73df;
        color: white;
        padding: 20px;
        text-align: center;
        border-radius: 5px;
        margin-bottom: 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }
      
      nav {
        background-color: #333;
        color: white;
        padding: 10px;
        margin-bottom: 20px;
        border-radius: 5px;
      }
      
      nav ul {
        display: flex;
        list-style: none;
        justify-content: center;
      }
      
      nav li {
        margin: 0 15px;
      }
      
      nav a {
        color: white;
        text-decoration: none;
        padding: 5px 10px;
        border-radius: 3px;
        transition: background-color 0.3s;
      }
      
      nav a:hover {
        background-color: #555;
      }
      
      main {
        display: grid;
        grid-template-columns: 3fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
      }
      
      section {
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }
      
      aside {
        background-color: #f0f0f0;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }
      
      footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 20px;
        border-radius: 5px;
        margin-top: 20px;
      }
      
      h1, h2, h3, h4, h5, h6 {
        margin-bottom: 15px;
        color: #333;
      }
      
      p {
        margin-bottom: 15px;
      }
      
      a {
        color: #4e73df;
        text-decoration: none;
      }
      
      a:hover {
        text-decoration: underline;
      }
      
      .highlight {
        background-color: #ffffcc;
        padding: 2px 5px;
        border-radius: 3px;
      }
      
      .btn {
        display: inline-block;
        background-color: #4e73df;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      
      .btn:hover {
        background-color: #2e59d9;
        text-decoration: none;
      }
      
      .btn-secondary {
        background-color: #858796;
      }
      
      .btn-secondary:hover {
        background-color: #717384;
      }
      
      .btn-success {
        background-color: #1cc88a;
      }
      
      .btn-success:hover {
        background-color: #17a673;
      }
      
      .btn-danger {
        background-color: #e74a3b;
      }
      
      .btn-danger:hover {
        background-color: #d52a1a;
      }
      
      .text-center {
        text-align: center;
      }
      
      .container {
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }
      
      .form-group {
        margin-bottom: 15px;
      }
      
      .form-control {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
      
      table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
      }
      
      th, td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      
      th {
        background-color: #f2f2f2;
      }
      
      tr:hover {
        background-color: #f5f5f5;
      }
      
      .card {
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 20px;
      }
      
      .card-header {
        background-color: #f8f9fc;
        padding: 15px;
        border-bottom: 1px solid #ddd;
      }
      
      .card-body {
        padding: 15px;
      }
      
      .alert {
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
      }
      
      .alert-info {
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
      }
      
      .alert-warning {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeeba;
      }
      
      .alert-danger {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
      }
      
      .alert-success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
      }
      
      .flex-container {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
      }
      
      .flex-item {
        flex: 1;
        background-color: #e9ecef;
        padding: 15px;
        border-radius: 5px;
      }
      
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-bottom: 20px;
      }
      
      .grid-item {
        background-color: #e9ecef;
        padding: 15px;
        border-radius: 5px;
      }
      
      @media (max-width: 768px) {
        main {
          grid-template-columns: 1fr;
        }
        
        .grid-container {
          grid-template-columns: 1fr;
        }
        
        .flex-container {
          flex-direction: column;
        }
      }
      
      /* 动画效果 */
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      
      .animated {
        animation: fadeIn 1s;
      }
      
      /* 代码块样式 */
      pre {
        background-color: #f4f4f4;
        padding: 15px;
        border-radius: 5px;
        overflow-x: auto;
        margin-bottom: 20px;
        font-family: Consolas, Monaco, 'Andale Mono', monospace;
      }
      
      code {
        background-color: #f4f4f4;
        padding: 2px 5px;
        border-radius: 3px;
        font-family: Consolas, Monaco, 'Andale Mono', monospace;
      }
    </style>
  </head>
  <body>
    <header class="animated">
      <h1>HTML和CSS学习示例</h1>
      <p>这是一个全面展示HTML元素和CSS样式的示例页面</p>
    </header>
    
    <nav>
      <ul>
        <li><a href="#html-basics">HTML基础</a></li>
        <li><a href="#text-formatting">文本格式化</a></li>
        <li><a href="#lists">列表</a></li>
        <li><a href="#tables">表格</a></li>
        <li><a href="#forms">表单</a></li>
        <li><a href="#semantic">语义化标签</a></li>
        <li><a href="#css-examples">CSS示例</a></li>
      </ul>
    </nav>
    
    <main>
      <div>
        <section id="html-basics">
          <h2>HTML基础</h2>
          <p>HTML（超文本标记语言）是创建网页的标准标记语言。HTML描述了网页的结构，由一系列的元素组成，这些元素告诉浏览器如何显示内容。</p>
          
          <div class="card">
            <div class="card-header">
              <h3>HTML文档结构</h3>
            </div>
            <div class="card-body">
              <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;页面标题&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;我的第一个标题&lt;/h1&gt;
    &lt;p&gt;我的第一个段落。&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
            </div>
          </div>
          
          <div class="alert alert-info">
            <strong>提示：</strong> HTML标签通常成对出现，如 &lt;p&gt; 和 &lt;/p&gt;，第一个标签是开始标签，第二个标签是结束标签。
          </div>
        </section>
        
        <section id="text-formatting">
          <h2>文本格式化</h2>
          <p>HTML提供了多种方式来格式化文本，以下是一些常见的文本格式化标签：</p>
          
          <h3>标题标签</h3>
          <h1>这是h1标题</h1>
          <h2>这是h2标题</h2>
          <h3>这是h3标题</h3>
          <h4>这是h4标题</h4>
          <h5>这是h5标题</h5>
          <h6>这是h6标题</h6>
          
          <h3>文本格式化标签</h3>
          <p><b>这是粗体文本</b></p>
          <p><strong>这是强调文本</strong></p>
          <p><i>这是斜体文本</i></p>
          <p><em>这是强调斜体文本</em></p>
          <p><mark>这是高亮文本</mark></p>
          <p><small>这是小号文本</small></p>
          <p><del>这是删除线文本</del></p>
          <p><ins>这是下划线文本</ins></p>
          <p>这是<sub>下标</sub>文本</p>
          <p>这是<sup>上标</sup>文本</p>
          
          <h3>引用</h3>
          <blockquote>
            这是一个长引用。这是一个长引用。这是一个长引用。这是一个长引用。这是一个长引用。这是一个长引用。这是一个长引用。
          </blockquote>
          <p>这是一个短引用：<q>学习HTML很有趣</q></p>
          <p>这是一个缩写：<abbr title="超文本标记语言">HTML</abbr></p>
          
          <h3>链接</h3>
          <p><a href="https://www.example.com" target="_blank">这是一个外部链接</a></p>
          <p><a href="#html-basics">这是一个页内链接</a></p>
          <p><a href="mailto:example@example.com">发送邮件</a></p>
        </section>
        
        <section id="lists">
          <h2>列表</h2>
          
          <h3>无序列表</h3>
          <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3
              <ul>
                <li>嵌套列表项1</li>
                <li>嵌套列表项2</li>
              </ul>
            </li>
          </ul>
          
          <h3>有序列表</h3>
          <ol>
            <li>第一步</li>
            <li>第二步</li>
            <li>第三步
              <ol type="a">
                <li>子步骤a</li>
                <li>子步骤b</li>
              </ol>
            </li>
          </ol>
          
          <h3>定义列表</h3>
          <dl>
            <dt>HTML</dt>
            <dd>超文本标记语言，用于创建网页结构</dd>
            <dt>CSS</dt>
            <dd>层叠样式表，用于设计网页样式</dd>
            <dt>JavaScript</dt>
            <dd>一种编程语言，用于网页交互</dd>
          </dl>
        </section>
        
        <section id="tables">
          <h2>表格</h2>
          <table>
            <thead>
              <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>职业</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>张三</td>
                <td>25</td>
                <td>工程师</td>
              </tr>
              <tr>
                <td>李四</td>
                <td>30</td>
                <td>设计师</td>
              </tr>
              <tr>
                <td>王五</td>
                <td>28</td>
                <td>教师</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="3">表格页脚</td>
              </tr>
            </tfoot>
          </table>
          
          <h3>表格合并</h3>
          <table>
            <tr>
              <th>姓名</th>
              <th colspan="2">联系方式</th>
            </tr>
            <tr>
              <td>张三</td>
              <td>123456789</td>
              <td>example@example.com</td>
            </tr>
            <tr>
              <td rowspan="2">李四</td>
              <td>987654321</td>
              <td>example2@example.com</td>
            </tr>
            <tr>
              <td>123123123</td>
              <td>example3@example.com</td>
            </tr>
          </table>
        </section>
        
        <section id="forms">
          <h2>表单</h2>
          <form action="#" method="post">
            <div class="form-group">
              <label for="name">姓名：</label>
              <input type="text" id="name" name="name" class="form-control" placeholder="请输入姓名">
            </div>
            
            <div class="form-group">
              <label for="email">邮箱：</label>
              <input type="email" id="email" name="email" class="form-control" placeholder="请输入邮箱">
            </div>
            
            <div class="form-group">
              <label for="password">密码：</label>
              <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码">
            </div>
            
            <div class="form-group">
              <label>性别：</label>
              <input type="radio" id="male" name="gender" value="male">
              <label for="male">男</label>
              <input type="radio" id="female" name="gender" value="female">
              <label for="female">女</label>
            </div>
            
            <div class="form-group">
              <label>兴趣爱好：</label>
              <input type="checkbox" id="reading" name="hobby" value="reading">
              <label for="reading">阅读</label>
              <input type="checkbox" id="music" name="hobby" value="music">
              <label for="music">音乐</label>
              <input type="checkbox" id="sports" name="hobby" value="sports">
              <label for="sports">运动</label>
            </div>
            
            <div class="form-group">
              <label for="country">国家：</label>
              <select id="country" name="country" class="form-control">
                <option value="">请选择</option>
                <option value="china">中国</option>
                <option value="usa">美国</option>
                <option value="japan">日本</option>
                <option value="korea">韩国</option>
              </select>
            </div>
            
            <div class="form-group">
              <label for="message">留言：</label>
              <textarea id="message" name="message" class="form-control" rows="5" placeholder="请输入留言"></textarea>
            </div>
            
            <div class="form-group">
              <label for="file">上传文件：</label>
              <input type="file" id="file" name="file">
            </div>
            
            <div class="form-group">
              <label for="color">选择颜色：</label>
              <input type="color" id="color" name="color">
            </div>
            
            <div class="form-group">
              <label for="date">日期：</label>
              <input type="date" id="date" name="date">
            </div>
            
            <div class="form-group">
              <label for="range">范围：</label>
              <input type="range" id="range" name="range" min="0" max="100">
            </div>
            
            <div class="form-group">
              <button type="submit" class="btn btn-success">提交</button>
              <button type="reset" class="btn btn-secondary">重置</button>
            </div>
          </form>
        </section>
        
        <section id="semantic">
          <h2>语义化标签</h2>
          <p>HTML5引入了许多新的语义化标签，使得网页结构更加清晰：</p>
          
          <div class="card">
            <div class="card-header">
              <h3>常用语义化标签</h3>
            </div>
            <div class="card-body">
              <ul>
                <li><code>&lt;header&gt;</code> - 定义文档或节的页眉</li>
                <li><code>&lt;nav&gt;</code> - 定义导航链接的容器</li>
                <li><code>&lt;main&gt;</code> - 定义文档的主要内容</li>
                <li><code>&lt;section&gt;</code> - 定义文档中的节</li>
                <li><code>&lt;article&gt;</code> - 定义独立的自包含内容</li>
                <li><code>&lt;aside&gt;</code> - 定义内容之外的内容（如侧边栏）</li>
                <li><code>&lt;footer&gt;</code> - 定义文档或节的页脚</li>
                <li><code>&lt;figure&gt;</code> - 定义自包含内容，如图表、照片等</li>
                <li><code>&lt;figcaption&gt;</code> - 定义 figure 元素的标题</li>
              </ul>
            </div>
          </div>
          
          <div class="alert alert-warning">
            <strong>注意：</strong> 使用语义化标签可以提高网页的可访问性和SEO效果。
          </div>
        </section>
        
        <section id="css-examples">
          <h2>CSS示例</h2>
          
          <h3>盒模型</h3>
          <div class="flex-container">
            <div class="flex-item" style="border: 2px solid #333; padding: 20px; margin: 10px;">
              这个元素有边框、内边距和外边距
            </div>
          </div>
          
          <h3>Flexbox布局</h3>
          <div class="flex-container">
            <div class="flex-item">Flex项目1</div>
            <div class="flex-item">Flex项目2</div>
            <div class="flex-item">Flex项目3</div>
          </div>
          
          <h3>Grid布局</h3>
          <div class="grid-container">
            <div class="grid-item">Grid项目1</div>
            <div class="grid-item">Grid项目2</div>
            <div class="grid-item">Grid项目3</div>
            <div class="grid-item">Grid项目4</div>
            <div class="grid-item">Grid项目5</div>
            <div class="grid-item">Grid项目6</div>
          </div>
          
          <h3>按钮样式</h3>
          <div class="container">
            <button class="btn">默认按钮</button>
            <button class="btn btn-primary">主要按钮</button>
            <button class="btn btn-secondary">次要按钮</button>
            <button class="btn btn-success">成功按钮</button>
            <button class="btn btn-danger">危险按钮</button>
          </div>
          
          <h3>警告框</h3>
          <div class="alert alert-info">这是一个信息提示框</div>
          <div class="alert alert-success">这是一个成功提示框</div>
          <div class="alert alert-warning">这是一个警告提示框</div>
          <div class="alert alert-danger">这是一个危险提示框</div>
          
          <h3>响应式设计</h3>
          <div class="container">
            <p>尝试调整浏览器窗口大小，观察页面布局的变化。在小屏幕上，主内容区和侧边栏会变成单列布局。</p>
          </div>
        </section>
      </div>
      
      <aside>
        <div class="container">
          <h3>HTML学习资源</h3>
          <ul>
            <li><a href="#">W3Schools HTML教程</a></li>
            <li><a href="#">MDN Web文档</a></li>
            <li><a href="#">菜鸟教程</a></li>
          </ul>
        </div>
        
        <div class="container">
          <h3>CSS学习资源</h3>
          <ul>
            <li><a href="#">W3Schools CSS教程</a></li>
            <li><a href="#">CSS-Tricks</a></li>
            <li><a href="#">菜鸟教程CSS</a></li>
          </ul>
        </div>
        
        <div class="container">
          <h3>HTML5新特性</h3>
          <ul>
            <li>语义化标签</li>
            <li>表单增强</li>
            <li>多媒体支持</li>
            <li>Canvas绘图</li>
            <li>本地存储</li>
          </ul>
        </div>
      </aside>
    </main>
    
    <section>
      <h2>多媒体元素</h2>
      
      <h3>图片</h3>
      <img src="https://via.placeholder.com/400x200" alt="示例图片" style="max-width: 100%; height: auto;">
      
      <h3>音频</h3>
      <audio controls>
        <source src="#" type="audio/mpeg">
        您的浏览器不支持音频元素。
      </audio>
      
      <h3>视频</h3>
      <video width="400" controls>
        <source src="#" type="video/mp4">
        您的浏览器不支持视频元素。
      </video>
      
      <h3>iframe</h3>
      <iframe src="https://www.example.com" width="100%" height="300" style="border:1px solid #ddd;"></iframe>
    </section>
    
    <footer>
      <p>&copy; 2023 HTML和CSS学习示例</p>
      <p>这个页面展示了HTML和CSS的基础知识，适合初学者学习</p>
      <p>
        <a href="#" class="btn">返回顶部</a>
      </p>
    </footer>
  </body>
</html>
